<!DOCTYPE html>
<html ng-app="ui.wisoft">
<head >
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="google-code-prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="google-code-prettify/prettify.js"></script>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/angular-1.3.6/angular.min.js"></script>
<script src="grunt-scripts/WebUI4Angular-tpls-all-mini.js"></script>
<script src="index_demo.js"></script>
<script src="demo/allDemo.js"></script>

<style type="text/css">
    body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,li, dl, dt, dd, form, a, fieldset, input, textarea, th, td{
        margin: 0; padding: 0;
        border: 0; outline: none;
        box-sizing: border-box;-webkit-box-sizing:border-box;}
    body,button,input,select,textarea{ font:14px/1.5 "\5FAE\8F6F\96C5\9ED1",arial, verdana, sans-serif}
    ul, ol{list-style: none;}
    table{border-collapse:collapse;}
    a{color: #0E81FE;text-decoration: none;}
    .nowrap{
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
    }
    .wrap{
        white-space:normal;
        word-break:break-all;
        word-wrap:break-word;
    }
    .noselect{
        -webkit-touch-callout:none;
        -webkit-user-select:none;
        -khtml-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select:none;
    }
    .clearf:after{content:" ";display:block;height:0;clear:both}
    .clearf{zoom:1}

    html,body{ height: 100%;}
    body{ position:relative;}
    #headDiv {
        width: 100%;
        height: 40px;
        line-height: 40px;
        border-bottom: solid 1px #ddd;
        background-color: #efefef;
        background-image: -webkit-linear-gradient(top, #fafafa 0, #efefef 100%);
        background-image: -moz-linear-gradient(top, #fafafa 0, #efefef 100%);
        background-image: -o-linear-gradient(top, #fafafa 0, #efefef 100%);
        background-image: linear-gradient(to bottom, #fafafa 0, #efefef 100%);
        background-repeat: repeat-x;
        top: 0;
        position: fixed;
        left: 0; right: 0;
        z-index: 1030;
        overflow: visible;
        font-size: 20px;
    }
    .blueTheme #headDiv{
        border-bottom: solid 1px #94C0D2;
        background-color: #daecf4;
        background-image: -webkit-linear-gradient(top, rgba(255,255,255,.45) 0, rgba(255,255,255,0) 100%);
        background-image: -moz-linear-gradient(top, rgba(255,255,255,.45) 0, rgba(255,255,255,0) 100%);
        background-image: -o-linear-gradient(top, rgba(255,255,255,.45) 0, rgba(255,255,255,0) 100%);
        background-image: linear-gradient(to bottom, rgba(255,255,255,.45) 0, rgba(255,255,255,0) 100%);
    }
    #headDiv .headCont{
        width:1024px;
        margin: 0 auto;
        height:100%;
    }
    #headDiv .brand {
        display: block;
        float: left;
        margin-right: 20px;
        font-weight: 200;
        color: #777777;
        text-decoration: none;
        height:100%;
    }
    .blueTheme #headDiv .brand{
        color:#003f59;
    }
    #headDiv .nav {
        position: relative;
        display: block;
        float: left;
        box-shadow: 0 0 4px 2px #cdcdcd inset;
        background: #E5E5E5;
        height:100%;
    }
    .blueTheme #headDiv .nav{
        background: #DAECF4;
        box-shadow:0 0 4px 2px #94C0D2 inset;
    }
    #headDiv .nav li {
        float: left;
        height:100%;
    }
    #headDiv .nav li > a {
        font-size: 14px;
        margin: 0;
        padding: 0 15px;
        color: #777777;
        text-shadow: 0 1px 0 #ffffff;
        height: 100%;
        display: block;
        float: none;
    }
    .blueTheme #headDiv .nav li > a{ color: #003f59;}
    #headDiv .nav li > a:hover { color: #333;}
    #changeTheme{
        float: right;
        font-size: 12px;
    }
    /* =========================== bodyDiv ============================ */
    #bodyDiv{
        width: 1024px;
        margin: 0 auto;
        padding: 50px 0 10px;
    }
    #bodyLeft{
        position: fixed;
        width: 200px;
        top: 50px; bottom: 10px;
    }
    #bodyRight{
        margin-left: 210px;
    }
    #bodyLeft .accordion-box{
        position: absolute;
        top: 35px; bottom: 0;
        left: 0; width:100%;
        overflow: auto;
        border: solid 1px #f0f0f0;
        background: #fafafa;
        padding: 3px;
    }
    .blueTheme #bodyLeft .accordion-box{
        border: solid 1px #DAECF4;
        background: #EAF4F9;
    }
    #bodyLeft a{ color:#333;}
    #search-query {
        background-color: #ffffff;
        border: 1px solid #dedede;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
        -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
        -o-transition: border linear 0.2s, box-shadow linear 0.2s;
        transition: border linear 0.2s, box-shadow linear 0.2s;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        width: 200px;
        -webkit-border-radius: 9px;
        -moz-border-radius: 9px;
        border-radius: 9px;
    }
    .blueTheme #search-query{
        border: 1px solid #94C0D2;
    }
    #search-query:focus{border-color: rgba(82, 168, 236, 0.8);
        outline: 0;
        outline: thin dotted \9;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
        -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    }
    #bodyRight>h3{
        font-size: 20px;
        line-height: 30px;
        height: 30px;
        padding-left: .5em;
    }
    #bodyRight .topTab{
        min-width: 100px;
    }
    #bodyRight p{
        margin: .5em 0;
        text-indent: 2em;
    }
    #bodyRight p .wi-btn{ text-indent: 0;}
    .demoRight{ padding: 10px;}
    .demoRight h3{
        font-size: 22px;
        line-height: 2;
        font-weight: bold;
    }
    .demoRight h4{
        font-size: 18px;
        line-height: 2;
        font-weight: bold;
    }
    .demoRight h5{
        line-height: 2;
        font-weight: bold;
    }
    .demoPanel{ padding: 5px 10px;}
    .dllist{
        border: solid 1px #f3f3f3;
        padding: 5px 15px;
        margin: 10px auto;
        background: #fafafa;
    }
    .blueTheme .dllist{
        border: solid 1px #DAECF4;
        background: #EAF4F9;
    }
    #releaseDiv h5:not(:first-child){
        margin-top: 10px;
    }
    #releaseDiv p.tips{
        font-style: italic;
    }
    .demoRight pre.prettyprint{
        display: block;
        padding: 5px;
        margin: 5px;
        word-break: break-all;
        word-wrap: break-word;
        white-space: pre-wrap;
        background-color: #f5f5f5;
        border: 1px solid #D9D9D9;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }
    .blueTheme .demoRight pre.prettyprint{
        border: solid 1px #DAECF4;
        background-color: #EAF4F9;
    }
</style>
<link id="themeLink"  rel="stylesheet" href="themes/default/wi-all.css" />
<script src="My97DatePicker/WdatePicker.js"></script><!-- 需在 wi-all.css 之后引入，且不可重命名 -->
</head>
<body ng-controller="mainCtrl">
<div id="headDiv">
    <div class="headCont clearf">
        <a class="brand">WebUI4Angular帮助</a>
        <ul class="nav">
            <li>
                <a href="index.html" onClick="javascript:window.open(this.href,'_blank');return false;">
                    <span class="fa fa-book"></span>  API文档</a>
            </li>
        </ul>
        <div id="changeTheme">
            <wi-combobox dataprovider="themes" width="100" selecteditem="selectedTheme" itemchange="themeChangeHandler"
                         rowcount="{{::themes.length}}" labelfield="name" >
            </wi-combobox>
        </div>
    </div>
</div>
<div id="bodyDiv" class="clearf" >
    <div id="bodyLeft">
        <input type="text" ng-model="query" placeholder="" tabindex="1" accesskey="s"  id="search-query">
        <div class="accordion-box">
            <wi-accordion oneopen="true">
                <wi-accordion-group  ng-repeat="item in demosInfo | filter:(query ? {'discribe':query} : '') track by $index" heading="{{item.discribe}}"
                                     title="{{item.discribe}}" is-open="item.isOpen">
                    <a style="cursor: pointer" ng-repeat="d in item.demos | filter:query" ng-click="changeDemo(d)"  >
                        {{d.demoDiscribe}}<br>
                    </a>
                </wi-accordion-group>
            </wi-accordion>
        </div>
    </div>
    <div id="bodyRight">
        <wi-tabset width="100%" height="100%">
            <wi-tab heading="欢迎" regular="true" active="actives.active1">
                <wi-tab-heading><div class="topTab">欢迎</div></wi-tab-heading>
                <div class="demoRight">
                    <h3>欢迎使用wisoftUI示例帮助</h3>
                    <wi-panel heading="组件说明及资源链接" collapsible="true" headTools="'collapse'" style="margin-bottom: 5px;">
                        <div class="demoPanel">
                            <p>WebUI4Angular是基于angularjs实现的一套UI组件，主要包括：datagrid,tree,dialog,progress,tilelist,tabset,dividedbox,imageview等等。组件需 要使用angularjs1.3以上版本，其中拍照组件cameraScanner另需安装flash player。</p>
                            <p>整套组件借鉴了UI Bootstrap等开源组件的写法，主要对指令进行了自己的封装，我们希望通过angular的指令编写一套类似flex的声明式UI组件,使得页 面代码更加简洁，可读性更强，复用性更好。</p>

                            <div class="dllist">
                                <h5>
                                    GitHub 项目地址：&nbsp;
                                    <a href="https://github.com/wi4angular/WebUI4Angular" onclick="javascript:window.open(this.href,'_blank');return false;">https://github.com/wi4angular/WebUI4Angular</a>
                                </h5>
                                <h5>
                                    oschina 项目地址：&nbsp;
                                    <a href="http://git.oschina.net/wisoft/WebUI4Angular" onclick="javascript:window.open(this.href,'_blank');return false;">http://git.oschina.net/wisoft/WebUI4Angular</a>
                                </h5>
                                <h5>压缩包下载地址：&nbsp;
                                    <a href="http://www.wisoft.com.cn:8120/WebUI4Angular/WebUI4Angular.zip" onclick="javascript:window.open(this.href,'_blank');return false;">http://www.wisoft.com.cn:8120/WebUI4Angular/WebUI4Angular.zip</a>
                                </h5>
                            </div>
                        </div>
                    </wi-panel>

                    <wi-panel heading="更新历史">
                        <div id="releaseDiv" class="demoPanel">
                            <h5>2015-06-17 WebUI4Angular-1.0-beta.5.1 发布。</h5>
                            <p class="tips">1. tabset：修改disabled属性为disable（IE中定义disabled认为禁用），添加tab头部动画，调整事件监听及方法接口等。</p>

                            <h5>2015-06-04 WebUI4Angular-1.0-beta.5 发布。</h5>
                            <p class="tips">1. 参考bootstrap，添加常用的表单布局，详见else（其他）；</p>
                            <p class="tips">2. 部分指令中开放手动通知resize接口reCompute，详见API；</p>
                            <p class="tips">3. 添加部分指令的事件监听及wid接口支持：panel，accordion，tree等；</p>
                            <p class="tips">4. dialog：修复弹出后回车会反复弹出的bug；</p>
                            <p class="tips">5. collapse：支持指定了高度的元素折叠，使accordion及panel支持%尺寸；</p>
                            <p class="tips">6. tabset：调整删除tab页时的尺寸计算；</p>
                            <p class="tips">7. tilelist：调整属性设置，重写行列计算；</p>
                            <p class="tips">8. panel：支持标题居中，%高度，添加工具栏自定义；</p>
                            <p class="tips">9. tree：调整样式，优化初始化流程及数据源处理，支持自定义图标、单/多选切换、树形数据源、悬停标识、级联，调整高亮行等。</p>

                            <h5>2015-03-16 WebUI4Angular-1.0-beta.4 发布。</h5>
                            <p class="tips">1. $position 中新增 offsetTop(element) 方法；</p>
                            <p class="tips">2. 添加弹出类组件（dialog，alert，popupbutton，combobox，menu）层级控制，保证后弹出的内容在最上层显示；</p>
                            <p class="tips">3. tabset 新增纵向滚动支持，支持定义标签尺寸及设置固定标签，删除 justified 均分支持，修改右键弹出菜单，调整选中项删除、切换操作；</p>
                            <p class="tips">4. datagrid 修改冲突属性的判断，修改并优化内部尺寸计算，调整模板，优化数据请求、分页、翻页操作等；</p>
                            <p class="tips">5. 优化 tooltip 弹出计算，支持禁用弹出时的动画，支持添加在顶层 body 下，移除 dom 时销毁资源；</p>
                            <p class="tips">6. 支持设置是否至多打开一个 accordionGroup，修复外部修改 isOpen 属性时不能打开其他 accordionGroup 的 bug；</p>
                            <p class="tips">7. 新增 progress 组件。</p>

                            <h5>2014-12-12 WebUI4Angular-1.0-beta.3 发布。</h5>
                            <p class="tips">1. 支持 angular-1.3.6 版本；</p>
                            <p class="tips">2. 优化 datagrid 性能；</p>
                            <p class="tips">3. 拍照组件更名为 camerascanner，并新增图像旋转，裁剪，相片质量控制等功能；</p>
                            <p class="tips">4. dialog 支持拖动，并新增非模态弹框；</p>
                            <p class="tips">5. dividedbox 支持自定义标题栏文本图标；</p>
                            <p class="tips">6. accordion 支持自定义标题栏高度；</p>
                            <p class="tips">7. menu 修复子菜单弹出 bug，修复弹出层受父容器 overflow 属性影响导致的 bug；</p>
                            <p class="tips">8. 新增 fileUpload 文件上传组件（IE9 暂不支持）；</p>
                            <p class="tips">9. 新增 bindhtml 组件。</p>

                            <h5>2014-11-17 WebUI4Angular-1.0-beta.2 发布。</h5>
                            <p class="tips">1. 修正组件的部分 bug；</p>
                            <p class="tips">2. 新增 alert 组件；</p>
                            <p class="tips">3. 新增 panel 组件；</p>
                            <p class="tips">4. 新增 button 的封装；</p>
                            <p class="tips">5. 新增（输入+搜索）组件；</p>
                            <p class="tips">6. 新增拍照组件；</p>
                            <p class="tips">7. 新增 Image 查看组件；</p>
                            <p class="tips">8. 新增 messageTip 组件。</p>

                            <h5>2014-10-24  WebUI4Angular-1.0-beta.1 发布。</h5>
                        </div>
                    </wi-panel>
                </div>
            </wi-tab>
            <wi-tab heading="示例" regular="true" active="actives.active2">
                <wi-tab-heading><div class="topTab">示例</div></wi-tab-heading>
                <div class="demoRight" ng-show="demoSrc">
                    <h3>示例：</h3><br />
                    <div  ng-include src="demoSrc" ></div>
                    <br />
                    <h3>代码：</h3><br />
                    <wi-tabset wid="demoTabset">
                        <wi-tab heading="Html片段" regular="true" active="true">
                            <pre id="htmlCode" class="prettyprint"></pre>
                        </wi-tab>
                        <wi-tab heading="JavaScript" regular="true">
                            <pre id="jsCode" class="prettyprint"></pre>
                        </wi-tab>
                    </wi-tabset>
                </div>
            </wi-tab>
        </wi-tabset>
    </div>
</div>
</body>
</html>